<template>
	<van-sticky :z-index="101" style="position:relative;z-index:101">
		<div class="feed-tab">
			<div class="scroll-panel" ref="scrollPanel">
				<div v-for="tag in actViews" :key="tag.floorId" :class="activeId===tag.floorId ? 'tags-item active' : 'tags-item'"
					 @click="toActPage(tag.floorId)" :data-color="tag.color" >
					<div :style="bgColor(tag)">{{ tag.title }}</div>
				</div>
			</div>
		</div>
	</van-sticky>
</template>
<style lang="scss" scoped>
.feed-tab{
	height:44px;background: var(--white-color);box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);
	overflow:auto;
	.container{
		position:relative; height:44px; padding:0 16px;
	}
	.scroll-panel{
		white-space: nowrap;
		.tags-item{
			display:inline-flex; color:var(--font-second-color);
			position:relative; font-size:14px; cursor: pointer;
			padding:8px 10px; height:44px;
			text-align: center;
			&>div{line-height:28px;padding:0 8px;}
			&:not(:last-child)::after{
				position: absolute; content:''; right: 0; top: 0;
				height: 26px; margin: 9px 0; width: 1px;
				background: linear-gradient(180deg,white,#dfdfdf 51%,white);
			}
			&.active{
				&>div{
					color:var(--white-color);font-weight:bold; border-radius:16px;
				}
			}
		}
	}
}
</style>
<script lang="ts" setup>
import {colorRgba} from '@/utils/validate'

const themeColor= import.meta.env.VITE_THEME_COLOR //默认的商城主题色#ee5313;
const route = useRoute()
const {to,replace} = useGoto()
const scrollPanel=ref()

//data
const activeId=ref('')
const activeIndex=ref(-1)
const actViews =ref(<Array<any>>[]) //后台获取一共有多少个有活动的楼层列表，
actViews.value=[
	{floorId:'11',title:'全国活动大激情1',color:'#7232dd'},
	{floorId:'22',title:'全国活动大激情2',color:'#0874FA'},
	{floorId:'33',title:'全国活动大激情3',color:'#e60027'},
	{floorId:'44',title:'全国活动大激情4',color:'#3AB882'},
	{floorId:'55',title:'全国活动大激情5',color:'#ED4D78'},
	{floorId:'66',title:'全国活动大激情6',color:'#EE5313'},
	{floorId:'77',title:'全国活动大激情7',color:'#e60027'},
	{floorId:'88',title:'全国活动大激情8',},
	{floorId:'99',title:'全国活动大激情99',color:'#e60027'},
]


//methods
//访问某个楼层页
const bgColor=(tag:any)=>{
	if(tag.floorId!=activeId.value)	return ''
	else{
		return 'background:'+(!tag.color? themeColor:tag.color)
	}
}

//访问某个楼层子路由页
const toActPage=(id:string)=>{
	if(activeId.value!==id){
		let i=0
		for(let act of actViews.value){
			if(act.floorId===id){
				activeId.value=act.floorId
				activeIndex.value=i
				break;
			}
			++i
		}
		moveToTarget()
		to('/discovery/actzone/'+id)
	}
}

const moveToTarget = ()=> {
	//读取列表后的异步操作：判断当前楼层页id是否是Url中传参id
	if(route.name==='actZoneFloor'){
		if( route.params.id && /^[0-9]+$/.test(route.params.id as string)){
			let i=0
			for(let act of actViews.value){
				if(act.floorId===route.params.id){
					activeId.value=act.floorId
					activeIndex.value=i
				}
				++i
			}
			if(activeId.value==='' && actViews.value.length>0) {
				replace('/discovery/actzone/'+actViews.value[0].floorId)
				activeId.value=actViews.value[0].floorId
				activeIndex.value=0
			}
		}else if(actViews.value.length>0){
			replace('/discovery/actzone/'+actViews.value[0].floorId)
			activeId.value=actViews.value[0].floorId
			activeIndex.value=0
		}
	}

	if(!scrollPanel.value)	return
	const tagListDom = scrollPanel.value.getElementsByClassName('tags-item');
	let currentTag = null;
	// find first tag and last tag
	if (tagListDom.length > 0 && activeIndex.value>-1) {
		currentTag = tagListDom[activeIndex.value]
	}else{
		console.log('none')
		return
	}
	//滚动至目标dom
	currentTag.scrollIntoView()
	//更改背景色
	const app = document.getElementById('app')
	if(app)app.style.backgroundColor = colorRgba((!currentTag.dataset.color? themeColor:currentTag.dataset.color),0.16)
}

watch(
	() => route.path,
	(newVal,oldVal) => {
		if(oldVal!==newVal){
			nextTick(()=>{moveToTarget()})
			//console.log('moveToTarget')
			//moveToTarget()
		}
	},{immediate:true}
)

// onActivated(() => {
// 	console.log('moveToTarget')
// 	moveToTarget()
// });
onBeforeUnmount(() => {
	const app = document.getElementById('app')
	if(app)app.style.backgroundColor=''
});
defineExpose({
	activeId,activeIndex
})
</script>